<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
</head>

<body>

    <div id="app">
        <!-- 第一次调用：函数和计算属性都执行 -->
        <p>{{methodsGetData()}}</p>
        <p>{{computedGetData}}</p>

        <!-- 第二次调用：只有函数会执行，因为message的值没变，所以计算属性不会执行 -->
        <p>{{methodsGetData()}}</p>
        <p>{{computedGetData}}</p>

        <!-- 修改message的值 -->
        <p>{{changeMessage()}}</p>
        <input type="text" v-model="message">

        <!-- 第三次调用：函数和计算属性都会执行 -->
        <p>{{methodsGetData()}}</p>
        <p>{{computedGetData}}</p>
    </div>
    <script>
        //创建Vue对象
        new Vue({
            el: "#app",
            data: {
                message: "hello woniuxy"
            },
            methods: {
                methodsGetData: function() {
                    console.log("function getData");
                    return this.message;
                },
                changeMessage: function() {
                    this.message = "welcome to here";
                    return "changed message";
                }
            },
            computed: {
                //简化写法 定义计算属性：用来对属性进行复杂数学，逻辑运算
                computedGetData() {
                    console.log("computed getData");
                    return this.message;
                }
            }
        });
    </script>
</body>

</html>